<template>
	<div class="app-container bgco">
		<div class="filter-container">
			<el-form :model="service" :rules="rules" ref="service" size="mini" >
				<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:10px;">
					<el-tab-pane label="云存储配置" name="first">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="启用:" label-width="140px">
									<el-select v-model="value" placeholder="" class="inwd">
									  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="阿里云OSS" name="second">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="AccessKeyId:" label-width="140px" prop="aliyunAccessKeyId">
									<el-input v-model="service.aliyunAccessKeyId"></el-input>
								</el-form-item>
								<el-form-item label="AccessKeySecret:" label-width="140px" prop="aliyunAccessKeySecret">
									<el-input v-model="service.aliyunAccessKeySecret"></el-input>
								</el-form-item>
								<el-form-item label="BucketName:" label-width="140px" prop="aliyunBucketName">
									<el-input v-model="service.aliyunBucketName"></el-input>
								</el-form-item>
								<el-form-item label="绑定的域名:" label-width="140px" prop="aliyunDomain">
									<el-input v-model="service.aliyunDomain"></el-input>
								</el-form-item>
								<el-form-item label="EndPoint:" label-width="140px" prop="aliyunEndPoint">
									<el-input v-model="service.aliyunEndPoint"></el-input>
								</el-form-item>
								<el-form-item label="路径前缀:" label-width="140px" prop="aliyunPrefix">
									<el-input v-model="service.aliyunPrefix"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
<!--					<el-tab-pane label="七牛云存储" name="third">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="空间名:" label-width="140px" prop="qiniuBucketName">
									<el-input v-model="service.qiniuBucketName"></el-input>
								</el-form-item>
								<el-form-item label="绑定的域名:" label-width="140px" prop="qiniuDomain">
									<el-input v-model="service.qiniuDomain"></el-input>
								</el-form-item>
								<el-form-item label="路径前缀:" label-width="140px" prop="qiniuPrefix">
									<el-input v-model="service.qiniuPrefix"></el-input>
								</el-form-item>
								<el-form-item label="SECRET_KEY:" label-width="140px" prop="qiniuSecretKey">
									<el-input v-model="service.qiniuSecretKey"></el-input>
								</el-form-item>
								<el-form-item label="ACCESS_KEY:" label-width="140px" prop="qiniuAccessKey">
									<el-input v-model="service.qiniuAccessKey"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>-->
				</el-tabs>
				<el-form-item label-width="140px" class="containbtn">
					<el-button class="subbtn" type="primary" icon="el-icon-success" size="medium" @click="sub('service')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // Waves directive
	import {seecloud,savecloud} from '@/api/admin/configure' //调用模块接口
	export default {
		name: 'cloud',
		components: {},
		directives: {
			waves
		},
		data() {
		  let _aliyunAccessKeyId = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunAccessKeyId == '') {
            return callback(new Error("请填写aliyunAccessKeyId"));
          }
        }
        return callback();
      };
      let _aliyunAccessKeySecret = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunAccessKeySecret == '') {
            return callback(new Error("请填写aliyunAccessKeySecret"));
          }
        }
        return callback();
      };
      let _aliyunBucketName = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunBucketName == '') {
            return callback(new Error("请填写aliyunBucketName"));
          }
        }
        return callback();
      };
      let _aliyunDomain = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunDomain == '') {
            return callback(new Error("请填写aliyunDomain"));
          }
        }
        return callback();
      };
      let _aliyunEndPoint = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunEndPoint == '') {
            return callback(new Error("请填写aliyunEndPoint"));
          }
        }
        return callback();
      };
      let _aliyunPrefix = (rule, value, callback) =>{
        if (this.activeName == 'second') {
          if (this.service.aliyunPrefix == '') {
            return callback(new Error("请填写aliyunPrefix"));
          }
        }
        return callback();
      };
      let _qiniuBucketName = (rule, value, callback) =>{
        if (this.activeName == 'third') {
          if (this.service.qiniuBucketName == '') {
            return callback(new Error("请填写qiniuBucketName"));
          }
        }
        return callback();
      };
      let _qiniuDomain = (rule, value, callback) =>{
        if (this.activeName == 'third') {
          if (this.service.qiniuDomain == '') {
            return callback(new Error("请填写qiniuDomain"));
          }
        }
        return callback();
      };
      let _qiniuPrefix = (rule, value, callback) =>{
        if (this.activeName == 'third') {
          if (this.service.qiniuPrefix == '') {
            return callback(new Error("请填写qiniuPrefix"));
          }
        }
        return callback();
      };
      let _qiniuSecretKey= (rule, value, callback) =>{
        if (this.activeName == 'third') {
          if (this.service.qiniuSecretKey == '') {
            return callback(new Error("请填写qiniuSecretKey"));
          }
        }
        return callback();
      };
      let _qiniuAccessKey= (rule, value, callback) =>{
        if (this.activeName == 'third') {
          if (this.service.qiniuAccessKey == '') {
            return callback(new Error("请填写qiniuAccessKey"));
          }
        }
        return callback();
      };
			return {
				activeName: 'first',
				options: [{
				  value: '0',
				  label: '阿里云'
				}, {
				  value: '1',
				  label: '七牛云'
				}],
				value:'0',
				service:{
          aliyunAccessKeyId: '',
          aliyunAccessKeySecret: '',
          aliyunBucketName: '',
          aliyunDomain: '',
          aliyunEndPoint: '',
          aliyunPrefix: '',
          // qiniuBucketName: '',
          // qiniuDomain: '',
          // qiniuPrefix: '',
          // qiniuSecretKey: '',
          // qiniuAccessKey: '',
        },
				rules:{
				}
			}
		},
		methods: {
			handleClick(tab, event) {
			},
			// 云存储配置提交
			sub(formName){
				this.$refs[formName].validate((valid) => {
				  if (valid) {//通过验证规则
					savecloud({
						"type": this.value,
						"aliyunDomain": this.service.aliyunDomain,
						"aliyunPrefix": this.service.aliyunPrefix,
						"aliyunEndPoint": this.service.aliyunEndPoint,
						"aliyunAccessKeyId": this.service.aliyunAccessKeyId,
						"aliyunAccessKeySecret": this.service.aliyunAccessKeySecret,
						"aliyunBucketName": this.service.aliyunBucketName,
						// "qiniuDomain": this.service.qiniuDomain,
						// "qiniuPrefix": this.service.qiniuPrefix,
						// "qiniuAccessKey": this.service.qiniuAccessKey,
						// "qiniuSecretKey": this.service.qiniuSecretKey,
						// "qiniuBucketName": this.service.qiniuBucketName
					}).then(res=>{
						if(res.respCode=='0000'){
							this.$alert('提交成功', {
							  confirmButtonText: '确定',
							  type:'success'
							});
						}
					})
				  } else {//没有通过验证规则
						this.$alert('提交失败,请将内容填写完整', {
							confirmButtonText: '确定',
							type:'warning '
						});
					return false;
				  }
				});
			}

		},
		created() {},
		mounted(){
			// 查看云存储配置
			seecloud({}).then(res=>{
				if(res.success){
				  if (res.data.config.type != null && res.data.config.type != '') {
            this.value = res.data.config.type+''
          } else {
            this.value = '0';
          }
            this.service.aliyunAccessKeyId = res.data.config.aliyunAccessKeyId ;
            this.service.aliyunAccessKeySecret = res.data.config.aliyunAccessKeySecret;
            this.service.aliyunBucketName = res.data.config.aliyunBucketName;
            this.service.aliyunDomain = res.data.config.aliyunDomain;
            this.service.aliyunEndPoint = res.data.config.aliyunEndPoint;
            this.service.aliyunPrefix = res.data.config.aliyunPrefix;
            // this.service.qiniuBucketName = res.data.config.qiniuBucketName;
            // this.service.qiniuDomain = res.data.config.qiniuDomain;
            // this.service.qiniuPrefix = res.data.config.qiniuPrefix;
            // this.service.qiniuSecretKey = res.data.config.qiniuSecretKey;
            // this.service.qiniuAccessKey = res.data.config.qiniuAccessKey;
				}
			})
		}
	}
</script>

<style scoped="scoped">
	.filter-container{
		background:#fff;
		padding:20px 20px;
		position:relative;
	}
	.mgbt{
		margin-bottom:20px;
	}
	.cloudtit{
		font-size: 18px;
	}
	.inwd{
		width:100%;
	}
	.el-button--medium{
		width:180px;
		height:40px;
	}
</style>
